<template>
  <el-dialog
    v-bind="attrs"
    :visible.sync="dialogVisible"
    v-on="listeners"
  >
    <VueOfficeDocx
      v-if="dialogVisible"
      :src="filePath"
      style="width: 100%; height: 100%;"
      @error="errorHandler"
      @rendered="renderedHandler"
    />
  </el-dialog>
</template>
<script>
import VueOfficeDocx from '@vue-office/docx'
export default {
  name: '',
  components: {
    VueOfficeDocx
  },
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    filePath: {
      type: String,
      default: ''
    }
  },
  data() {
    return {

    }
  },
  computed: {
    attrs() {
      return { ...this.$attrs }
    },
    listeners() {
      return { ...this.$listeners }
    },
    dialogVisible: {
      get() {
        return this.visible
      },
      set(value) {
        return this.$emit('update:visible', value)
      }
    }
  },
  methods: {
    renderedHandler(e) {
      console.log('VueOfficeDocx render complete：', e)
    },
    errorHandler(e) {
      console.log('VueOfficeDocx render fail：', e)
    }
  }
}
</script>
<style lang="scss" scoped>
</style>
